<template>
  <el-form
      ref="formRef"
      :model="tableData"
      :validate-on-rule-change="true">
    <el-table
        :scrollbar-always-on="true"
        ref="tableRef"
        :data="tableData"
        :height="tableHeight"
        :row-key="rowKey"
        :lazy="lazy"
        :load="load"
        v-loading="isLoading"
        :tree-props="treeProps"
        :highlight-current-row="isClickOne"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange"
        @cell-dblclick="handleDoubleClick"
        style="width: 100%"
    >
      <template #default>
        <el-table-column
            v-if="isSelection"
            :align="alignType"
            type="selection"
            width="55"/>
        <el-table-column
            v-if="isShowIndex"
            label="序号"
            type="index"
            width="55"
            :align="alignType"
            :index="indexMethod"/>
        <ColumnItem
            v-for="item in tableHead"
            :key="item.label"
            :col="item"
            :alignType="alignType"
        ></ColumnItem>

        <el-table-column
            ref="fixedColumn"
            v-if="tableOperateBar"
            :width="tableOperateBar.width"
            :fixed="tableOperateBar.fixed"
            :align="alignType"
            label="操作">
          <template #default="scope">
            <div class="operate-group">
              <template v-for="btn in tableOperateBar.list">
                <el-popconfirm
                    v-if="btn.type=='danger'"
                    :title="btn.title"
                    @confirm="btn.method(scope.$index, scope.row)"
                >
                  <template #reference>
                    <el-button
                        link
                        :type="btn.type"
                    >{{ btn.label }}
                    </el-button>
                  </template>
                </el-popconfirm>
                <el-button
                    v-else
                    link
                    :type="btn.type"
                    @click="btn.method(scope.$index, scope.row)"
                >{{ btn.label }}
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
      </template>

      <template #empty>
        <div flex="dir:column align:center justify:center">
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
  </el-form>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import ColumnItem from '@/components/CustomTable/ColumnItem/index.vue'
import {FormInstance} from "element-plus";

const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  },
  //操作栏
  tableOperateBar: {
    type: Object,
    default: () => {
      return null
    }
  },
  //表头数据
  tableHead: {
    type: Array,
    default: () => [],
  },
  //表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  //是否在表格下方显示合计
  isShowSum: {
    type: Boolean,
    default: false,
  },
  //判断单元格文字是居中还是左对齐显示,默认居中
  alignType: {
    type: String,
    default: "center",
  },
  //设置表格高度,固定表头
  height: {
    type: String,
    default: null, //默认不固定表头
  },
  //是否支持单选
  isClickOne: {
    type: Boolean,
    default: false,
  },
  //单选选中的数据
  selectOneData: {
    type: Object,
    default: {},
  },
  //是否支持多选
  isSelection: {
    type: Boolean,
    default: false,
  },
  //多选的数据
  selectMoreData: {
    type: Array,
    default: [],
  },
  //是否支持懒加载
  lazy: {
    type: Boolean,
    default: false,
  },
  //懒加载key
  rowKey: {
    type: String,
    default: "",
  },
  //懒加载函数
  load: {
    type: Function,
    default: () => {
    },
  },
  //树形属性
  treeProps: {
    type: Object,
    default: () => {
      return {children: 'children', hasChildren: 'hasChildren'}
    }
  },
  isShowIndex: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits<{
  (event: 'update:selectOneData', newVal: any[]): void
  (event: 'update:selectMoreData', newVal: any[]): void
  (event: 'doubleClick', row, column, cell, event): void
}>();

const formRef = ref<FormInstance>()

const validate = async () => {
  console.log('我是子组件方法')
  if (!formRef) return
  return await formRef.value?.validate((valid: any) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 重点！！这里需要使用defineExpose暴露出去
defineExpose({
  validate
})
const indexMethod = (index: number) => {
  return index + 1
}

const handleCurrentChange = (val: any[]) => {
  emits('update:selectOneData', val)
}

const handleSelectionChange = (val: any[]) => {
  emits('update:selectMoreData', val)
}
// 双击表格事件
const handleDoubleClick = (row, column, cell, event) => {
  emits('doubleClick', row, column, cell, event)
}

const tableRef = ref()
const tableHeight = ref()
onMounted(() => {
  if (props.height) {
    tableHeight.value = props.height;
  } else {
    let bottomHeight = 10 + 20 + 10 + 64
    tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - bottomHeight;

    // 监听浏览器高度变化
    window.onresize = () => {
      tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - bottomHeight;
    };
  }

});
</script>

<style scoped lang='less'>
/* 处理表格表头和内容错位问题 */
.el-table th.gutter {
  display: table-cell !important;
}

.el-table th,
.el-table td {
  padding: 7px 0 !important;
}
</style>
